<template>
	<view class="cart">
		<!-- 自定义导航栏 -->
		<nav-bar  middlebar="购物车" rightbar="编辑">
			<template v-slot:right-click>
				<view class="d-flex a-center j-center" style="width: 85rpx;" @click="isedit=!isedit">{{ isedit?'完成':'编辑' }}</view>
			</template>
		</nav-bar>
		
		
		<!-- 购物车为空 -->
		<view class="d-flex a-center j-center bg-white py-2" v-if="disableSelectAll">
			<view class="iconfont icon-gouwuche text-light-muted" style="font-size: 50upx;"></view>
			<text class="text-light-muted mx-2">购物车还是为空</text>
			<view class="border border-light-secondary mx-2 p-1 rounded" hover-class="bg-light-secondary">
				去逛逛
			</view>
		</view>
		
		<!-- 购物车商品列表 -->
		<view class="bg-white px-2">
			<view class="d-flex a-center py-3 border-bottom border-light-secondary" v-for="(item,index) in list" :key="index">
				<label class="radio d-flex a-center j-center flex-shrink" 
				style="width: 80upx;height: 80upx;" @click="selectItem(index)">
					<radio :value="item.goods_pid" :checked="item.checked" color="#FD6801"/>
				</label>
				
				<image :src="item.IMAGE1" 
				mode="widthFix" style="height: 150rpx;width: 150rpx;"
				class="border border-light-secondary rounded p-2 flex-shrink">
				</image>
				
				<view class="d-flex flex-1 flex-column pl-2">
					<view class="text-dark" style="font-size:35rpx">{{ item.NAME }}</view>
					<view class="d-flex mt-auto j-sb">
						<view class="font-sm main-text-color">{{ item.PRESENT_PRICE }}</view>
						<view class="a-self-end">
							<uni-number-box :min="1" :max="9" :value="item.goods_count"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="height: 55px;"></view>
		
		<view class="d-flex position-fixed bottom-0 left-0 right-0 bg-white border-top border-light-secondary a-stretch" style="height: 100rpx;z-index: 100;">
			<label class="radio d-flex a-center j-center flex-shrink"
			style="width: 120rpx;" @click="doSelectAll">
				<radio  color="#FD6801" :checked="checkedAll" :disabled="disableSelectAll" />
			</label>
			<template v-if="!isedit">
				<view class="d-flex flex-1 a-center j-center main-text-color font-md">
					合计: <text>{{totalPrice}}</text>
				</view>
				<view class="flex-1 d-flex  a-center j-center border main-bg-color text-white" @click="orderConfirm">
					结算
				</view>
			</template>
			
			<template v-else>
				<view class="d-flex flex-1 a-center j-center main-text-color font-md">
					
				</view>
				<view class="flex-1 d-flex  a-center j-center border main-bg-color text-white" @click="doDelGoods()">
					删除
				</view>
			</template>
			
		</view>
		
	</view>
</template>

<script>
	import  navBar from "@/components/common/nav-bar.vue"
	import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
	export default {
		data() {
			return {
				isedit: false //切换编辑和完成
			}
		},
		onShow() {
			this.getcartproduct()
		},
		components:{navBar},
		computed:{
			...mapState({
				list:state=>state.cart.list,
				token:state=>state.login.tokenx,
				selectedList:state=>state.cart.selectedList
			}),
			...mapGetters([
				'checkedAll',
				'totalPrice',
				'disableSelectAll'
			])
		},
		methods: {
			 getcartproduct(){
				 this.$H.post('/order/getcart',{
					 user_id:this.token
				 },{
					 token:true
				 }).then(res=>{
					 this.setlist(res.msg);
				 })
			 },
			 orderConfirm(){
				if(this.selectedList.length === 0){
					return uni.showToast({
						title:"请选择要结算的商品",
						icon: 'none'
					})
				}

				uni.navigateTo({
					url:"../order-confirm/order-confirm?detail="+JSON.stringify(this.selectedList)
				})
			 },
			 ...mapMutations([
				 'setlist',
				 'selectItem'
			 ]),
			 ...mapActions([
				 'doSelectAll',
				 'doDelGoods'
			 ])
		}
	}
</script>

<style lang="scss">
	.uni-numbox[data-v-dd94a2a8]{
		width: 86px;
	}
	
	.cart{
		padding-bottom: var(--window-bottom);
	}
	
</style>
